<my-pageheader></my-pageheader>

<div style="margin: 20px 20px 50px 20px" *ngIf="ability">
    <mat-card style="margin-top: 20px; background-color: #f0f0f0">
        <div style="float: right; font-size: 20px; margin-right: 20px" *ngIf="!isMobile">
            <a (click)="toggleStar()" matTooltip="关注">
                <span *ngIf="star" class="fa fa-star" style="color: gold"></span>
                <span *ngIf="!star" class="fa fa-star-o"></span>
            </a>
            &nbsp;
            <a (click)="gotoStargazers()">
                <span matTooltip="粉丝数量">{{ability.starCount}}</span>
            </a>
        </div>
        <span style="font-weight: bold; font-size: 28px">
            {{ability.solutionName}}
        </span>
        <span *ngIf="isOwner && ability.isPublic && !isMobile" style="font-size: 16px; color: red">
            |我的能力
        </span>
        <span *ngIf="isOwner && !ability.isPublic && !isMobile" style="font-size: 16px; color: red">
            |我的私有能力
        </span>
        <span *ngIf="isOperator && !isMobile" style="font-size: 16px; color: red">
            |我是管理员
        </span>
    </mat-card>

    <mat-card *ngIf="isOperator && !isMobile">
        <p>控制字段(仅管理员可见)</p>
        <mat-form-field>
            <input matInput [(ngModel)]="ability.subject1" type="text" placeholder="主题1" maxlength=20>
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput [(ngModel)]="ability.subject2" type="text" placeholder="主题2" maxlength=20>
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput [(ngModel)]="ability.subject3" type="text" placeholder="主题3" maxlength=20>
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput [(ngModel)]="ability.displayOrder" type="number" placeholder="显示控制">
        </mat-form-field>
    </mat-card>
    <mat-card>
        <div style="float: right">
            <mat-card style="width: 200px; height: 200px">
                <a (click)="gotoSolution()">
                    <img matCardImage src="{{ability.pictureUrl}}" alt="blank" matTooltip="点击查看模型详情">
                </a>
            </mat-card>
        </div>
        <div>
            <p>模型名称： {{ability.solutionName}}</p>
            <p>
                模型作者：
                <a (click)="gotoPersonalModels(ability.solutionAuthor)">
                    {{ability.solutionAuthor}}
                </a>

            </p>
            <p>
                能力部署：
                <a (click)="gotoPersonalAbilitys(ability.deployer)">
                    {{ability.deployer}}
                </a>
            </p>
            <p>部署日期： {{ability.createdDate | date:'yyyy-MM-dd HH:mm:ss'}}</p>
            <p>
                运行状态：
                <span *ngIf="ability.status === '运行'" style="color: green">{{ability.status}}</span>
                <span *ngIf="ability.status !== '运行'" style="color: red">{{ability.status}}</span>
            </p>
            <p>调用次数： {{ability.callCount}}</p>
        </div>
    </mat-card>
    <mat-card *ngIf="ability.status === '运行'">
        <p>API接口：  {{genAbilityUrl()}}</p>
        <p>HTTP请求头:&nbsp;&nbsp;&nbsp;&nbsp;Content-Type: application/json&nbsp;&nbsp;&nbsp;&nbsp;Accept: application/json</p>
        <p>模型方法和HTTP请求体格式请参考模型文档：&nbsp;&nbsp;&nbsp;&nbsp;
            <button (click)="gotoSolution()" *ngIf="ability.solution">查看模型</button>
        </p>
        <p>
            <span *ngIf="isOperator">
                <mat-form-field style="width: 400px">
                    <input matInput type="text" placeholder="能力调用示范界面URL" [(ngModel)]="ability.demoUrl" (blur)="updateDemoUrl()">
                </mat-form-field>
                &nbsp;&nbsp;&nbsp;&nbsp;
            </span>
            <button (click)="openDemoUrl()" *ngIf="ability.demoUrl">查看能力调用示范界面</button>
        </p>
    </mat-card>

    <mat-card *ngIf="ability.status === '运行'">
        <h4>接口测试</h4><br>
        <p>
            HTTP方法： POST
        </p>
        <p>
            URL： {{genAbilityUrlPrefix()}}
            <mat-form-field>
                <input matInput type="text" placeholder="模型方法" [(ngModel)]="modelMethod">
            </mat-form-field>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button mat-raised-button color="primary" (click)="sendTestRequest()" [disabled]="!modelMethod || !requestBody || sending">
                发送请求
            </button>
        </p>
        <div class="row">
            <div class="col-md-6">
                <button mat-raised-button color="primary" (click)="genTestRequest()" *ngIf="!modelMethod && !requestBody">
                    <span>生成测试数据</span>
                </button>
                <button mat-raised-button color="accent" (click)="cleanTestRequest()" *ngIf="modelMethod || requestBody">
                    <span>清空测试数据</span>
                </button>
                <br><br>
                <mat-form-field style="width: 100%">
                    <textarea matInput style="height: 200px" [(ngModel)]="requestBody" placeholder="HTTP请求体"></textarea>
                </mat-form-field>
            </div>
            <div class="col-md-6">
                <button mat-raised-button color="accent" (click)="cleanResponseBody()" [disabled]="!responseBody">
                    <span>清空响应体</span>
                </button>
                <br><br>
                <mat-form-field style="width: 100%">
                    <textarea matInput style="height: 200px" [ngModel]="responseBody" placeholder="HTTP响应体" readonly></textarea>
                </mat-form-field>
            </div>
        </div>
    </mat-card>
    <mat-card *ngIf="(isOperator || isOwner) && !isMobile">
        <h4>生命周期管理</h4>
        <mat-card *ngIf="ability.status === '运行'" style="margin-top: 20px">
            <button mat-raised-button color="warn" (click)="stopAbility()" *ngIf="ability.status === '运行'">
                停止实例
            </button>
        </mat-card>
    </mat-card>
</div>
